<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>文章详情_陈恢严个人博客</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/asset/js/jquery.min.js"></script>
  <link rel="icon" href="/asset/images/favicon.ico" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
    <!-- 加载特效插件start -->
    <link href="/asset/css/loading.css" rel="stylesheet">
    <!-- 加载特效插件end -->
    <!-- 评论插件start -->
    <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/main.css" />
    <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/sinaFaceAndEffec.css" />
    <script type="text/javascript" src="/asset/commpluing/js/main.js"></script>
    <script type="text/javascript" src="/asset/commpluing/js/sinaFaceAndEffec.js"></script>
    <!-- 评论插件end -->
  <script type="text/javascript" src="/asset/js/comm.js"></script>
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <script type="text/javascript" src="/asset/js/vue.min.js"></script>
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->
  <style>
    nav ul li a[href='/myArticle']{color: #f7ffb4; /*background: #176c86;*/
        background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
        background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
        background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
        background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
        background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
        background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    }
      .tags a:hover{ color: #fff;}
    .layui-form-switch{ margin-top: 0 !important;}
  </style>
</head>
<body>
<!--<div class="box-bg">-->
<!--    <div class="stars"></div>  &lt;!&ndash;背景层，不要删除，不然没有作用&ndash;&gt;-->
<!--</div>-->
 <div id="articleInfoVue">
     <header>
         <div class="profile">
             <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
             <div class="guanzhu fl">
                 <ul>
                     <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
                     <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
                     <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
                     <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
                 </ul>
             </div>

             <!-- 加载提示start -->
             <div class="loading-div" v-if="!isLoad_1">
                 <div class="loader">
                     <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
                 </div>
             </div>
             <!-- 加载提示end -->

             <!-- 标题 -->
             <div class="username" v-html="logoTitle.content"></div>
         </div>

         <!-- 菜单start -->
         <nav>
             <ul id="starlist">
                 <li :key="item.id" v-for="(item, index) in sysMenuList">
                     <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
                     <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.location.href  = '/blogSpace';" v-text="item.name"></a>
                 </li>
             </ul>
         </nav>
         <!-- 菜单end -->
     </header>
     <article>
         <main class="r_article-info">
             <!-- 文章start -->
             <div class="newsview">
                 <div v-if="type == 'article'">
                     <h3 class="news_title">
                         <span class="layui-badge" v-if="articleInfo.isTop == '1'" v-text="articleInfo.isTopName"></span>
                         <span v-text="articleInfo.title"></span>
                     </h3>
                     <div class="bloginfo">
                         <ul>
                             <li class="author">发布人：<a href="javascript:void(0)" v-text="articleInfo.userName"></a></li>
                             <li class="timer" v-text="'时间：' + articleInfo.createDateValue"></li>
                             <li class="view" v-text="articleInfo.readNum + '人已阅读'"></li>
                         </ul>
                     </div>
                     <div class="tags">
                         <a href="javascript:void(0)"  v-for="(item, index) in articleInfo.boTagList" :key="item.id" v-text="item.name" v-bind:style="'background-color:' + item.color"></a>
                     </div>
                     <div class="news_about">
                         <strong>简介</strong>
                         <div v-text="articleInfo.remark"></div>
                     </div>
                     <div class="news_con" v-html="articleInfo.content">

                     </div>
                     <div class="fileList">
                         <h3 class="">附件：</h3>
                         <p v-for="(item, index) in articleInfo.boFileList" :key="item.id">
                             <a v-bind:href="'/myArticle/downloadFile?fileId=' + item.id" v-text="(index + 1) + '、' + item.fileOrgname" target="_blank"></a>
                         </p>
                     </div>
                     <p class="diggit" v-on:click="clickPraise">
                         很赞哦！(<b id="diggnum" v-text="articleInfo.praiseNum"></b>)
                     </p>
                     <div class="nextinfo">
                         <p>上一篇：<a href="/myArticle">返回列表</a></p>
                         <p>下一篇：<a href="javascript:void(0)">暂无</a></p>
                     </div>
                 </div>
                 <!-- 文章end -->

                 <!-- 日记start -->
                 <div v-if="type == 'diary'">
                     <h3 class="news_title" v-text="diaryInfo.title"></h3>
                     <div class="bloginfo">
                         <ul>
                             <li class="author">发布人：<a href="javascript:void(0)" v-text="diaryInfo.author"></a></li>
                             <li class="timer" v-text="'时间：' + diaryInfo.sendTimeValue"></li>
                         </ul>
                     </div>
                     <div class="news_about">
                         <strong>简介</strong>
                         <div v-text="diaryInfo.remark"></div>
                     </div>
                     <div class="news_con" v-html="diaryInfo.content">

                     </div>
                     <div class="nextinfo">
                         <p>上一篇：<a href="/myDiary">返回列表</a></p>
                         <p>下一篇：<a href="javascript:void(0)">暂无</a></p>
                     </div>
                 </div>
                 <!-- 日记end -->

                 <!-- 评论start -->
                 <div class="news_pl">
                     <h2><strong>评论/留言</strong></h2>
                     <div class="gbko">
                         <div class="comment-content">
                             <div class="cont-box">
                                 <textarea class="text" id="pl-comment" v-model="commForm.content" placeholder="写下你想说的，开始我们的对话"></textarea>
                                 <div class="tools-box">
                                     <div class="operator-box-btn">
                                         <span class="face-icon layui-icon layui-icon-face-surprised" title="表情"></span>
                                         <span class="img-icon layui-icon layui-icon-picture" title="插入图片"></span>
                                     </div>                                     <div class="username">
                                         <i class="layui-icon"></i>
                                         <input type="text" id="pl-username" v-model="commForm.userName" class="pl-key" size="15" placeholder="你的昵称" value="">
                                     </div>
                                     <div class="submit-btn" v-on:click="submitComment"><input type="button" value="发布" /></div>
                                 </div>
                             </div>
                             <div class="clear-float"></div>
                             <p style="margin-top: 20px; height: 30px;">
                                 <span v-if="type == 'article'"><strong v-text="articleInfo.readNum" style="color:#f90;"></strong>人参与，</span>
                                 <span><strong style="color:#f90;" v-text="count"></strong>条评论</span>
                                 <span><strong style="color:#f90;" v-text="referCount"></strong>条回复</span>
                                 <span class="layui-form" style="float: right;">
                                    <input type="checkbox" id="isFuAdminSwitch" lay-filter="isFuAdminSwitch" lay-skin="switch" lay-text="验证通过|副博主认证">
                                    <input type="checkbox" id="isAdminSwitch" lay-filter="isAdminSwitch" lay-skin="switch" lay-text="验证通过|博主认证">
                                 </span>
                             </p>
                         </div>
                         <div id="info-show">
                             <ul>
                                 <li v-for="(item, index) in commList" :key="item.id">
                                     <div class="head-face">
                                         <img v-bind:src="'/asset/images/commhead/' + item.headPhoto">
                                         <div class="clear-float"></div>
                                         <strong class="head-index" v-text="getIndex(index) + '楼'"></strong>
                                     </div>
                                     <div class="reply-cont">
                                         <p v-if="item.isAdmin == 0" v-text="item.userName"></p><!-- 游客 -->
                                         <p v-if="item.isAdmin == 1"><span v-html="item.userName" style='color:#ff37d5'></span></p><!-- 副博主 -->
                                         <p v-if="item.isAdmin == 2"><span v-html="item.userName" style='color:#FF5722'></span></p><!-- 博主 -->
                                         <p class="comment-body" v-html="analyticEmotion(item.content)"></p>
                                         <p class="comment-footer">
                                             <span v-text="timeago(item.time)"></span>
                                             <a href="#pl-comment" class="reply-btn" v-on:click="reply(item.id, item.userName, item.content)">回复</a>
                                             <a href="javascript:void(0)" class="reply-btn" v-on:click="commPraise(item.id)" v-text="'点赞(' + item.praise + ')'"></a>
                                         </p>
                                         <!-- 回复模块start -->
                                         <div class="reply-reply-cont" v-for="(childItem, childIndex) in item.childList" :key="childItem.id">
                                             <div class="head-face">
                                                 <img v-bind:src="'/asset/images/commhead/' + childItem.headPhoto">
                                             </div>
                                             <p v-if="childItem.isAdmin == 0" class="by-user-name" v-text="childItem.byUserName + ' @ ' + childItem.userName"></p><!-- 游客 -->
                                             <p v-if="childItem.isAdmin == 1" class="by-user-name">
                                                 <span v-html="childItem.byUserName" style='color:#ff37d5'></span>
                                                 <span v-text="' @ ' + childItem.userName"></span>
                                             </p><!-- 副博主 -->
                                             <p v-if="childItem.isAdmin == 2" class="by-user-name">
                                                 <span v-html="childItem.byUserName" style='color:#FF5722'></span>
                                                 <span v-text="' @ ' + childItem.userName"></span>
                                             </p><!-- 博主 -->
                                             <p class="comment-body refer-content" v-html="'引用：' + analyticEmotion(childItem.referContent)"></p>
                                             <p class="comment-body" v-html="analyticEmotion(childItem.content)"></p>
                                             <p class="comment-footer">
                                                 <span v-text="timeago(childItem.time)"></span>
                                                 <a href="#pl-comment" class="reply-btn" v-on:click="reply(childItem.parentId, childItem.byUserName, childItem.content)">回复</a>
                                                 <a href="javascript:void(0)" class="reply-btn" v-on:click="commPraise(childItem.id)" v-text="'点赞(' + childItem.praise + ')'"></a>
                                             </p>
                                         </div>
                                         <!-- 回复模块end -->
                                     </div>
                                 </li>
                             </ul>
                         </div>
                         <div class="clear-float"></div>
                     </div>

                     <!-- 加载提示start -->
                     <div class="loading-div" v-if="!isLoad_2">
                         <div class="loader">
                             <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
                         </div>
                     </div>
                     <!-- 加载提示end -->

                     <!-- 分页 -->
                     <div class="pagelist" id="pageContent"></div>

                 </div>
                 <!-- 评论end -->

             </div>

         </main>
     </article>
     <footer>
         <p v-html="indexFooter.content"></p>
     </footer>
     <a href="#" class="cd-top">Top</a>
 </div>
</body>
    <script>

        //自动推送,页面URL将立即被推送给百度
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();

        //初始化layui模块
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer;
            var form = layui.form;

            //监听身份验证开关
            form.on('switch(isAdminSwitch)', function(data){
                if(data.elem.checked){
                    var index = layer.open({
                        title: '博主身份验证',
                        type: 1,
                        shade: 0.2,
                        maxmin:false,
                        shadeClose: false,
                        btn: ['确定', '取消'],
                        area: ['250px','150px'], //宽高
                        content: '<input type="password" id="adminKey" placeholder="请输入口令" autofocus autocomplete="off" class="layui-input">',
                        yes: function(index, layero){
                            var adminKey = $("#adminKey").val();
                            if(adminKey == '' || adminKey == null || adminKey == undefined){
                                layer.msg("请输入口令", {icon:2});
                                return;
                            }
                            var loadIndex = layer.load(2); //加载提示
                            $.ajax({
                                type: 'POST',
                                url: '/aboutMe/validAdmin',
                                data: {
                                    adminKey: adminKey
                                },
                                dataType: 'JSON',
                                success: function(data){
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.close(index); //关闭加载提示
                                    if(data.state == "200"){
                                        layer.msg(data.message, {icon:1});
                                        articleInfoVue.commForm.isAdmin = 2; //修改身份为博主
                                    }else{
                                        layer.msg(data.message, {icon:2});
                                        $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                                        articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                                    }
                                    form.render();
                                },
                                error: function(error){
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.msg(error, {icon:2});
                                    $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                                    articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                                    form.render();
                                }
                            })
                        },
                        btn2: function(index, layero){
                            layer.close(index);
                            $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                            articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                            form.render();
                        },
                        cancel: function(index, layero){
                            layer.close(index);
                            $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                            articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                            form.render();
                        }
                    });
                }else{
                    articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                    form.render();
                }
            });

            //监听副博主身份验证开关
            form.on('switch(isFuAdminSwitch)', function(data){
                if(data.elem.checked){
                    var index = layer.open({
                        title: '副博主身份验证',
                        type: 1,
                        shade: 0.2,
                        maxmin:false,
                        shadeClose: false,
                        btn: ['确定', '取消'],
                        area: ['250px','150px'], //宽高
                        content: '<input type="password" id="fuAdminKey" placeholder="请输入口令" autofocus autocomplete="off" class="layui-input">',
                        yes: function(index, layero){
                            var adminKey = $("#fuAdminKey").val();
                            if(adminKey == '' || adminKey == null || adminKey == undefined){
                                layer.msg("请输入口令", {icon:2});
                                return;
                            }
                            var loadIndex = layer.load(2); //加载提示
                            $.ajax({
                                type: 'POST',
                                url: '/aboutMe/validFuAdmin',
                                data: {
                                    adminKey: adminKey
                                },
                                dataType: 'JSON',
                                success: function(data){
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.close(index); //关闭加载提示
                                    if(data.state == "200"){
                                        layer.msg(data.message, {icon:1});
                                        articleInfoVue.commForm.isAdmin = 1; //修改身份为副博主
                                    }else{
                                        layer.msg(data.message, {icon:2});
                                        $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                                        articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                                    }
                                    form.render();
                                },
                                error: function(error){
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.msg(error, {icon:2});
                                    $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                                    articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                                    form.render();
                                }
                            })
                        },
                        btn2: function(index, layero){
                            layer.close(index);
                            $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                            articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                            form.render();
                        },
                        cancel: function(index, layero){
                            layer.close(index);
                            $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                            articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                            form.render();
                        }
                    });
                }else{
                    articleInfoVue.commForm.isAdmin = 0; //修改身份为游客
                    form.render();
                }
            });
        });

        $(function(){
            // 评论插件：绑定表情
            $('.face-icon').SinaEmotion($('.text'));
        });

        var articleInfoVue = new Vue({
            el: '#articleInfoVue',
            data: function () {
                return {
                    id: '[[${id}]]',
                    type: '[[${type}]]',
                    serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
                    isLoad_1: false, //请求1完成标记
                    isLoad_2: false, //请求2完成标记
                    sysMenuList: [], //导航
                    logoTitle: [], //LOGO标题
                    indexFooter: [], //页脚
                    articleInfo: [], //文章信息
                    diaryInfo: [], //日记信息
                    commList: [], //评论列表
                    referCount: 0, //评论回复总数
                    count: 0, //评论总数
                    curr: 1, //页数
                    limit: 10, //每页条数
                    commForm: {
                        serviceId: '',
                        classify: 0,
                        content: '',
                        userName: '',
                        headPhoto: '',
                        parentId: '',
                        byUserName: '',
                        referContent: '',
                        type: 0,
                        isAdmin: 0
                    }
                }
            },
            created: function () {
                const me = this;
                me.$nextTick(function () {
                    me.updateReadNum();
                    me.getMyArticleData();
                    me.getArticleInfo();
                    me.getCommList(me.curr, me.limit);
                });
            },
            methods: {
                //初始化基本信息
                getMyArticleData: function(){
                    const me = this;
                    $.ajax({
                        type: 'POST',
                        url: '/myArticle/getMyArticleInfoData',
                        data: {},
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){
                                me.sysMenuList = data.sysMenuList;
                                me.logoTitle = data.logoTitle;
                                me.indexFooter = data.indexFooter;

                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                            me.isLoad_1 = true;
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //初始化文章信息
                getArticleInfo: function(){
                    const me = this;
                    me.isLoad_2 = false;
                    //判断是文章还是日记
                    var url = me.type == 'article'? '/myArticle/getArticleInfo' : '/myDiary/getDiaryInfo';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            id: me.id
                        },
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){

                                if(me.type == 'article'){
                                    me.articleInfo = data.articleInfo;
                                    $("title").text(me.articleInfo.title + "-陈恢严个人博客");
                                    $("meta[name='description']").attr("content", me.articleInfo.remark);
                                }else{
                                    me.diaryInfo = data.diaryInfo;
                                    $("title").text(me.diaryInfo.title + "-陈恢严个人博客");
                                    $("meta[name='description']").attr("content", me.diaryInfo.remark);
                                }
                                me.isLoad_2 = true;
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //初始化文章评论信息
                getCommList: function(curr, limit){
                    const me = this;
                    me.isLoad_2 = false;

                    //评论类别(0文章，1相册，2前台留言，3日记，4个人空间日记留言)
                    if(me.type == "article"){
                        me.commForm.classify = 0;
                    }else{
                        me.commForm.classify = 3;
                    }

                    var url = '/myArticle/getCommList';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            page: curr,
                            limit: limit,
                            id: me.id,
                            classify: me.commForm.classify
                        },
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){
                                me.commList = data.commList;
                                me.count = data.count;
                                me.referCount = data.referCount;

                                //使用Vue评论表情不能格式化，没有刷新vue的值，只
                                // 能这样改变值再还原才能初始化成功（咱也不知道为什么会这样）
                                setTimeout(function(){
                                    me.commForm.content = " ";
                                    me.commForm.content = "";
                                }, 2000);

                                me.initPage(); //初始化分页

                                $('newsview').css('min-height', $('aside').css('height')); //文章区域最小高度等则边栏的高度
                                me.isLoad_2 = true;
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //文章点赞
                clickPraise: function(){
                    const me = this;
                    var url = '/myArticle/updatePraiseNum';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            id: me.id
                        },
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){
                                me.articleInfo.praiseNum  = me.articleInfo.praiseNum + 1;
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:1});
                                });
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //阅读数量加+1
                updateReadNum: function(){
                    const me = this;
                    if(me.type == 'article'){
                        var url = '/myArticle/updateReadNum';
                        $.ajax({
                            type: 'POST',
                            url: url,
                            data: {
                                id: me.id
                            },
                            dataType: 'JSON',
                            success: function(data){
                                if(data.state == "200"){

                                }else{
                                    layui.use('layer', function(){
                                        var layer = layui.layer;
                                        layer.msg(data.message, {icon:2});
                                    });
                                }
                            },
                            error: function(error){
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(error, {icon:2});
                                });
                            }
                        })
                    }
                },

                //评论点赞
                commPraise: function(id){
                    const me = this;
                    var url = '/myArticle/commPraise';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            id: id
                        },
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){
                                me.getCommList(me.curr, me.limit);
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:1});
                                });
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //发布评论
                submitComment: function(){
                    const me = this;
                    me.commForm.content = $("#pl-comment").val();
                    if(me.commForm.content == "" || me.commForm.content == null || me.commForm.content == undefined){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg("请输入内容>_<", {icon:2});
                        });
                        return;
                    }
                    if(me.commForm.content.length > 500){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg("内容不能超过500字>_<", {icon:2});
                        });
                        return;
                    }
                    if(me.commForm.userName.length > 10){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg("昵称不能超过10个字>_<", {icon:2});
                        });
                        return;
                    }
                    //评论类别(0文章，1相册，2前台留言，3日记，4个人空间日记留言)
                    if(me.type == "article"){
                        me.commForm.classify = 0;
                    }else{
                        me.commForm.classify = 3;
                    }

                    //根据格式判断是否为回复（内容格式：@原评论者昵称:空格）
                    var contentStr = me.commForm.content.split("@" + me.commForm.byUserName + ": ");
                    if(contentStr.length < 2){ //不是回复
                        me.commForm.type = 0; //类型为评论
                        me.commForm.parentId = "" ;//父级id为空
                        me.commForm.byUserName = ""; //回复者昵称为空
                        me.commForm.referContent = ""; //引用的内容为空
                    }else{ //是回复
                        me.commForm.content = me.commForm.content.replace("@" + me.commForm.byUserName + ": ", ""); //还原内容
                        //昵称互换
                        var username = me.commForm.userName;
                        me.commForm.userName = me.commForm.byUserName;
                        me.commForm.byUserName = username;
                    }

                    me.commForm.serviceId = me.id; //业务id

                    //判断是否为博主或副博主
                    if(me.commForm.isAdmin == 1){
                        me.commForm.headPhoto = 'favatar.jpg'; //头像
                        if(contentStr.length < 2){ //不是回复
                            me.commForm.userName = "副博主";
                        }else{
                            me.commForm.byUserName = "副博主";
                        }
                    }else if(me.commForm.isAdmin == 2){
                        me.commForm.headPhoto = 'avatar.jpg'; //头像
                        if(contentStr.length < 2){ //不是回复
                            me.commForm.userName = "博主";
                        }else{
                            me.commForm.byUserName = "博主";
                        }
                    }else{
                        me.commForm.headPhoto = 'comm_head' + me.random(1, 31) + '.jpg'; //头像
                    }

                    var loadIndex = layer.load(2); //加载提示
                    var url = '/myArticle/addComment';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: me.commForm,
                        dataType: 'JSON',
                        success: function(data){
                            if(data.state == "200"){
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.msg(data.message, {icon:1});
                                });
                                //初始化表单
                                me.commForm.content = ""; //清空内容
                                me.commForm.type = 0; //类型为评论
                                me.commForm.parentId = "" ; //父级id为空
                                me.commForm.userName = ""; //评论者昵称为空
                                me.commForm.byUserName = ""; //回复者昵称为空
                                me.commForm.referContent = ""; //引用的内容为空
                                me.getCommList(me.curr, me.limit);
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.close(loadIndex); //关闭加载提示
                                    layer.msg(data.message, {icon:2});
                                });
                            }
                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.close(loadIndex); //关闭加载提示
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //点击回复
                reply: function(parentId, userName, referContent){
                    const me = this;
                    me.commForm.parentId = parentId; //父级id
                    me.commForm.byUserName = userName; //原评论者昵称暂时保存到评论者昵称中，提交表单时进行交换
                    me.commForm.referContent = referContent; //引用的内容
                    me.commForm.type = 1; //类型为回复
                    me.commForm.content = "@" + userName + ": "; //内容格式：@原评论者昵称:空格
                },

                //生成min－max的随机数(不包max)
                random: function(min, max) {
                    var num = Math.floor(Math.random() * (max - min)) + min;
                    var numstr = num < 10? '0' + num : num;
                    return numstr;
                },

                //格式化评论内容
                analyticEmotion: function(content){
                    return AnalyticEmotion(content);
                },

                //获取楼层（分页叠加）
                getIndex: function(index){
                    const me = this;
                    var num = me.curr * me.limit + (index + 1 - me.limit);
                    return num;
                },

                //时间计算：多少分钟前……
                timeago: function(hisTime){
                    var now = new Date().getTime(),
                        diffValue = now - new Date(hisTime).getTime(),
                        result='',
                        minute = 1000 * 60,
                        hour = minute * 60,
                        day = hour * 24,
                        halfamonth = day * 15,
                        month = day * 30,
                        year = month * 12,

                        _year = diffValue / year,
                        _month = diffValue / month,
                        _halfamonth = diffValue / halfamonth,
                        _week = diffValue / (7 * day),
                        _day = diffValue / day,
                        _hour = diffValue / hour,
                        _min = diffValue / minute;

                    if(_year >= 1) result = parseInt(_year) + "年前";
                    else if(_month >= 1) result = parseInt(_month) + "个月前";
                    else if(_halfamonth >= 1) result = "半个月前";
                    else if(_week >= 1) result = parseInt(_week) + "周前";
                    else if(_day >= 1) result = parseInt(_day) + "天前";
                    else if(_hour >= 1) result = parseInt(_hour) + "个小时前";
                    else if(_min >= 1) result = parseInt(_min) + "分钟前";
                    else result = "刚刚";
                    return result;
                },

                //分页
                initPage: function(){
                    const me = this;
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'pageContent' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: me.count //数据总数，从服务端得到
                            ,limit: me.limit //每页条数
                            ,curr: me.curr //页数
                            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
                            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
                            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
                                //首次不执行
                                if(!first){
                                    me.curr = obj.curr;
                                    me.getCommList(obj.curr, obj.limit);
                                }
                            }
                        });
                    });
                }
            }
        });
    </script>
</html>
